<template>
	<view class="container">
		<u-loading-page color="#fff" :loading="loading" loading-mode="spinner"></u-loading-page>
		<view class="header-box">
			<view style="display: flex; font-size: 28rpx; align-items: center">
				<img style="margin-right: 20rpx" :src="detailData.avatar" alt="" />
				<view>
					<view>{{ detailData.createBy }}</view>
					<view style="font-size: 24rpx; color: #999">{{
            detailData.createTime
          }}</view>
				</view>
			</view>

			<view style="display: flex; align-items: center">
				<view style="margin-right: 30rpx">
					<u-icon v-if="personInfo.isLike === 'Y'" size="60rpx" color="#e45656" @click="isLikeMethod('Y')"
						name="heart-fill"></u-icon>
					<u-icon v-else size="60rpx" @click="isLikeMethod('N')" name="heart"></u-icon>
				</view>
				<view>
					<u-icon v-if="personInfo.isFavorite === 'Y'" @click="isFavoriteMethod('Y')" size="60rpx"
						color="#e45656" name="star-fill"></u-icon>
					<u-icon v-else size="60rpx" @click="isFavoriteMethod('N')" name="star"></u-icon>
				</view>
			</view>
			<!-- 富文本内容部分 -->
		</view>
		<view style="padding: 40rpx;padding-top: 0;">
			<view>
				<view style="font-size: 32rpx; font-weight: 600">{{
          detailData.title
        }}</view>
				<view style="font-size: 28rpx; margin-top: 20rpx">
					<u-parse :content=" detailData.content"></u-parse>
				</view>
				<view style="display: flex;margin-top: 20rpx;flex-wrap: wrap">
					<view v-for="(item,index) in detailData.labelNameList"
						style="margin-right: 10rpx;margin-bottom: 10rpx;">
						<template v-if='index ===0'>
							<u-tag :text="item" plain shape="circle"></u-tag>
						</template>
						<template v-if='index ===1'>
							<u-tag :text="item" type="warning" plain shape="circle"></u-tag>
						</template>
						<template v-if='index ===2'>
							<u-tag :text="item" type="success" plain shape="circle"></u-tag>
						</template>
						<template v-if='index ===3'>
							<u-tag :text="item" type="error" plain shape="circle"></u-tag>
						</template>
					</view>

				</view>
			</view>
		</view>
		<view class="line-10"></view>
		<!-- 评价部分 -->
		<view style="padding: 20rpx 30rpx">
			<view class="rich-title">
				<view>评价</view>
				<view style="margin-left: 20rpx"><u-button @click="publishMethod" type="primary" size="mini"
						text="发布"></u-button></view>
			</view>
			<view v-for="item in reviewList" :key="item.id">
				<view class="rich-text">
					<img :src="item.weAvatar" alt="" />
					<view class="title-ruch-box">
						<view style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              ">
							<view style="display: flex; align-items: center">{{ item.weUserName }}
								<text style="margin-left: 20rpx; font-size: 24rpx">{{ item.publicTime.slice(0, 10) }}
								</text>
								<u-icon v-if="item.isLike === 'Y'" size="40rpx" color="#e45656"
									@click="plisLikeMethod('Y', item.id)" name="heart-fill"></u-icon>
								<u-icon v-else size="40rpx" @click="plisLikeMethod('N', item.id)" name="heart"></u-icon>
							</view>

							<view style="margin-left: 20rpx; float: right;display: flex;">
								<!-- <text style="color: #3c9cff; margin-right: 14rpx" @click="recoverMethod(item)">回复</text> -->
								<u-icon @click.stop="recoverMethod(item)" name="plus-circle" color="#216be6"
									size="28"></u-icon>
								<u-icon v-if="weUserId === item.weUserId" @click.stop="delMethod(item)" name="trash"
									color=" rgb(243, 93, 33)" size="28"></u-icon>
							</view>
						</view>
						<view class="ruch-p">{{ item.content }}</view>
					</view>
				</view>
				<template v-if="item.children">
					<view class="children-rich-text" v-for="citem in item.children" :key="citem.id">
						<img :src="citem.weAvatar" alt="" />
						<view class="title-ruch-box">
							<view style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                ">
								<view style="display: flex; align-items: center">{{ citem.weUserName }}
									<text
										style="margin-left: 20rpx; font-size: 24rpx">{{ citem.publicTime.slice(0, 10) }}
									</text>
									<u-icon v-if="citem.isLike === 'Y'" size="40rpx" color="#e45656"
										@click="plisLikeMethod('Y', item.id, citem.id)" name="heart-fill"></u-icon>
									<u-icon v-else size="40rpx" @click="plisLikeMethod('N', item.id, citem.id)"
										name="heart"></u-icon>
								</view>

								<view style="margin-left: 20rpx; float: right">
									<!-- <text style="color: #3c9cff;" @click="recoverMethod(citem)">回复</text> -->
									<u-icon v-if="weUserId === citem.weUserId" @click.stop="delMethod(citem)"
										name="trash" color=" rgb(243, 93, 33)" size="28"></u-icon>
								</view>
							</view>
							<view class="ruch-p">{{ citem.content }}</view>
						</view>
					</view>
				</template>
			</view>
			<!-- <view class="rich-text">
				<img src="https://cdn.uviewui.com/uview/swiper/swiper1.png" alt="">
				<view class="title-ruch-box">
					<view class="ruch-title">某中客</view>
					<view class="ruch-p">某中客某中客某中客某中客某中客某中客某中客某中客某中客某中客某中客某中客某中客</view>
				</view>
				<view>
					<u-icon name="heart" size="32 rpx"></u-icon>
				</view>
		</view> -->
		</view>

		<!-- 底部 -->
		<u-popup :show="show" @close="close" @open="open" :round="10" mode="bottom">
			<view class="footer-box">
				<view v-if="isPublish" style="padding: 10rpx">
					<text>回复：{{ copy_item.weUserName }}</text>
				</view>
				<view class="footer-box-content">
					<view style="width: 80%">
						<u--input placeholder="评论" shape="circle" prefixIcon="search" v-model="value"
							prefixIconStyle="font-size: 22px;color: #909399"></u--input>
					</view>
					<view style="display: flex; align-items: center">
						<u-button @click="submitMethod" type="primary" size="small" text="发布"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		info,
		commentArea,
		publishComment,
		like,
		unlike,
		collector,
		unCollector,
		removeComment,
		commentsLike,
		commentsUnlike,
	} from "@/api/axios/HairCommunity.js";
	export default {
		data() {
			return {
				value: "",
				list: [{
						name: "脱发答疑",
					},
					{
						name: "植发答疑",
					},
					{
						name: "术后答疑",
					},
				],
				current: 0,
				currentOneType: 0,
				detailData: {},
				personInfo: {},
				reviewList: [],
				isPublish: false,
				show: false,
				openId: "",
				copy_item: {},
				weUserId: "",
				loading: false,
				startTime: ''
				// likeQuantity: false,
				// favoriteQuantity: false
			};
		},
		methods: {
			plisLikeMethod(isFlag, pid, id) {
				let _this = this;
				if (!id) {
					if (isFlag === "N") {
						commentsLike({
							openId: this.openId,
							commentsId: pid,
						}).then((res) => {
							_this.reviewList.forEach((item) => {
								console.log(item.id, pid);
								if (item.id === pid) {
									item.isLike = "Y";
									_this.clue({
										relationId: item.id,
										action: '4',
										eventType: '1',
									})
								}
							});
						});
					} else {
						commentsUnlike({
							openId: this.openId,
							commentsId: pid,
						}).then((res) => {
							_this.reviewList.forEach((item) => {
								if (item.id === pid) {
									item.isLike = "N";
								}
							});
						});
					}
				} else {
					if (isFlag === "N") {
						commentsLike({
							openId: this.openId,
							commentsId: id,
						}).then((res) => {
							_this.reviewList.forEach((item) => {
								if (item.id === pid) {
									item.children.forEach((citem) => {
										if (citem.id === id) {
											console.log("citem.isLike", citem.isLike);
											citem.isLike = "Y";
											_this.clue({
												relationId: citem.id,
												action: '4',
												eventType: '1',
											})
										}
									});
								}
							});
						});
					} else {
						commentsUnlike({
							openId: this.openId,
							commentsId: id,
						}).then((res) => {
							_this.reviewList.forEach((item) => {
								if (item.id === pid) {
									item.children.forEach((citem) => {
										if (citem.id === id) {
											citem.isLike = "N";
										}
									});
								}
							});
						});
					}
				}
			},
			isLikeMethod(isFlag) {
				let _this = this;
				if (isFlag === "N") {
					like({
						openId: this.openId,
						articlesId: this.personInfo.id,
					}).then((res) => {
						_this.personInfo.isLike = "Y";
						_this.clue({
							relationId: _this.personInfo.id,
							action: '4',
							eventType: '1',
						})
					});
				} else {
					unlike({
						openId: this.openId,
						articlesId: this.personInfo.id,
					}).then((res) => {
						_this.personInfo.isLike = "N";
					});
				}
				uni.$emit("articleUpdate");
			},
			isFavoriteMethod(isFlag) {
				let _this = this;
				if (isFlag === "Y") {
					unCollector({
						openId: this.openId,
						articlesId: this.personInfo.id,
					}).then((res) => {
						_this.personInfo.isFavorite = "N";
					});
				} else {
					collector({
						openId: this.openId,
						articlesId: this.personInfo.id,
					}).then((res) => {
						_this.personInfo.isFavorite = "Y";
						_this.clue({
							relationId: _this.personInfo.id,
							action: '2',
							eventType: '1',
						})
					});
				}
				uni.$emit("articleUpdate");
			},
			submitMethod(item) {
				if (!this.isPublish) {
					let _this = this;
					publishComment({
						openId: this.openId,
						articleId: this.personInfo.id,
						parentId: "",
						content: this.value,
						receiveWeUserId: "",
					}).then((res) => {
						_this.init(_this.personInfo.id);
						_this.show = false;
						_this.value = "";
					});
				} else {
					let _this = this;

					publishComment({
						openId: this.openId,
						articleId: this.personInfo.id,
						content: this.value,
						parentId: this.copy_item.id,
						receiveWeUserId: this.copy_item.WeUserId,
					}).then((res) => {
						_this.init(_this.personInfo.id);
						_this.show = false;
						_this.value = "";
					});
				}
			},
			recoverMethod(item) {
				this.show = true;
				this.isPublish = true;
				this.copy_item = item;

			},
			delMethod(item) {
				let _this = this;
				this.loading = true;
				removeComment({
					openId: this.openId,
					commentId: item.id,
				}).then((res) => {
					_this.loading = false;

					_this.init(_this.personInfo.id);
				});
			},
			publishMethod() {
				this.isPublish = false;
				this.show = true;
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false;
				// console.log('close');
			},
			init(id) {
				let _this = this;

				_this.loading = true;

				commentArea({
					params: {
						openId: this.openId,
						id: id,
					},
				}).then((res) => {
					_this.loading = false;
					this.reviewList = res.content;
				});
			},
		},
		onUnload() {
			// uni.$emit("articleUpdate");
		},
		onLoad(e) {
			let openId = uni.getStorageSync("openId");
			this.openId = openId;
			let _this = this;
			this.personInfo = e;
			this.startTime = this.currentTime()
			info({
				params: {
					openId,
					id: e.id,
				},
			}).then((res) => {
				console.log(res);
				_this.detailData = res;
			});
			this.init(e.id);
		},
		onReady() {
			this.weUserId = uni.getStorageSync("weUserId");
		},
		onUnload() {
			console.log('生命周期回调—监听页面隐藏');
			let currentTime = this.currentTime()
			console.log(currentTime);
			let obj = {
				relationId: this.personInfo.id,
				action: '3',
				eventType: '2',
				eventStartTime: this.startTime,
				eventEndTime: currentTime,
			};
			this.clue(obj)
			// 		
		},
	};
</script>

<style lang="scss">
	@import "index.scss";
</style>